<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>支付</title>

    <!-- 微信UI库 -->
    <link rel="stylesheet" href="libs/weui/weui.css">

    <!-- 微信JS库 -->
    <script type="text/javascript" src="libs/weui.js/weui.js"></script>
    <!-- jQuery -->
    <script type="text/javascript" src="libs/jquery/jquery-2.2.3.min.js"></script>
    <!-- 微信JS-SDK -->
    <script type="text/javascript" src="libs/js-sdk/jweixin-1.2.0.js"></script>
    <!-- 自定义公共JS -->
    <script type="text/javascript" src="js/app.js"></script>

    <style>

    </style>
</head>
<body>
<div class="page">
    <br>
    <a class="weui-btn weui-btn_primary" href="javascript:;" id="payBtn">马上支付</a>
</div>

<div id="console"></div>


<script type="text/javascript">
    $(function () {
        $.ajax({
            type: 'POST',
            url: Commons.WEIXIN_OAUTH_H5_URL + '/wx/jssdk/config',
            dataType: 'JSON',
            success: function (result) {
                wx.config({
                    debug: true, 					// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: result.appid, 			// 必填，公众号的唯一标识
                    timestamp: result.timestamp, 	// 必填，生成签名的时间戳
                    nonceStr: result.noncestr, 		// 必填，生成签名的随机串
                    signature: result.signature,	// 必填，签名，见附录1
                    // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                    jsApiList: [
                        'chooseWXPay'
                    ]
                });

                wx.ready(function () {
                    //获取URL中的openid参数
                    var openid = Commons.getRequestParam('openid')
                    var mobile = Commons.getRequestParam('mobile')

                    $('#payBtn').click(function () {
                        initPay(openid, mobile)
                    })


                });
                wx.error(function (res) {
                    console.info(res);
                });
            },
            error: function (e, ee) {
                console.info(e);
            }
        })

    });

    function initPay(openid, mobile) {
        if (typeof WeixinJSBridge == "undefined") {
            if (document.addEventListener) {
                document.addEventListener('WeixinJSBridgeReady', initPay, false);
            } else if (document.attachEvent) {
                document.attachEvent('WeixinJSBridgeReady', initPay);
                document.attachEvent('onWeixinJSBridgeReady', initPay);
            }
        } else {
            toPay(openid, mobile);
        }
    }

    function toPay() {

        var data = {
            'body': '测试支付',
            'detail': '测试支付详情',
            'total_fee': 1,
            'trade_type': 'JSAPI',
            'openid': 'oIsgAtAPjJ-8GvUXljx_EB7yqbpc'
        };
        var url = Commons.WEIXIN_OAUTH_H5_URL + '/wx/pay/toPay';
        $.ajax({
            type: 'POST',
            url: url,
            dataType: 'JSON',
            data: data,
            success: function (result) {
                console.log(result)

                if(result.status) {
                    var order = result.order;
                    var appId = result.appId;
                    var timeStamp = result.timeStamp;
                    var nonceStr = result.nonceStr;
                    var packages = result.package;
                    var signType = result.signType;
                    var paySign = result.paySign;
                    //调起支付
                    onBridgeReady(appId, timeStamp, nonceStr, packages, signType, paySign)
                } else {
                    weui.alert("发生错误："+result.msg);
                }

            },
            error: function (e, ee) {
                console.info(e);
            }
        })
    }

    /**
     * 调起支付
     * @param appId         公众号id
     * @param timeStamp     时间戳
     * @param nonceStr      随机字符串
     * @param packages      订单详情扩展字符串(prepay_id=123456789)
     * @param signType      签名方式(MD5)
     * @param paySign       签名
     */
    function onBridgeReady(appId, timeStamp, nonceStr, packages, signType, paySign) {
        WeixinJSBridge.invoke(
            'getBrandWCPayRequest', {
                "appId": appId,
                "timeStamp": timeStamp,
                "nonceStr": nonceStr,
                "package": packages,
                "signType": signType,
                "paySign": paySign
            },
            function (res) {
                print(res)
                // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。

                if(res.err_msg == "get_brand_wcpay_request:ok" ) {
                    weui.alert("支付成功");
                }else if(res.err_msg == "get_brand_wcpay_request:cancel" ) {
                    weui.alert("用户取消");
                }
            }
        );
    }

    function print() {
        for (var i = 0; i < arguments.length; i++) {
            $('#console').append(JSON.stringify(arguments[i])).append("<br>")
        }
    }
</script>


</body>
</html>